<template>
	<view class="courseDetails">
		<view class="status_bar"></view>
		<view class="header">
			<view class="status_title">
				<image class="status_left" src="/static/img/arr-left.png" mode="widthFix" @click="back"></image>
				<view class="status_center">{{ courseDetailInfo.title }}</view>
				<!-- <text><image src="/static/img/zhuanfa.png" mode="" style="width: 24px; height: 24px"></image></text> -->
				<text></text>
			</view>
		</view>
		<view class="courseDetails-content">
			<view class="main">
				<image :src="`https://www.aikoolearn.com/video-dev${courseDetailInfo.cover}`" style="width: 252px; height: 168px; border-radius: 8px"></image>
				<view class="main-right">
					<view class="title">
						{{ courseDetailInfo.title }}
					</view>
					<view>酷学课程/{{ courseDetailInfo.title }}</view>
					<view class="">主讲老师：{{ courseDetailInfo.lecturer }}</view>
					<view class="collection">
						<p style="margin: 0 20px" v-if="!isCollect" @click="handleCollect('on')">
							<image class="c-star" style="width: 20px; height: 20px" src="/static/img/collect-gray.png" alt=""></image>
							<span>收藏</span>
						</p>
						<p style="color: #25c0a7; margin: 0 20px" v-else @click="handleCollect('off')">
							<image class="c-star" style="width: 20px; height: 20px" src="/static/img/collect.png" alt=""></image>
							<span>已收藏</span>
						</p>

						<view @click="handlePlay()">开始学习</view>
					</view>
				</view>
			</view>

			<view class="more-content">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" style-type="text" active-color="#0FB09B" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0">
						<view class="content-text">
							<h3>课程简介</h3>
							<p class="synopsis">{{ courseDetailInfo.synopsis }}</p>
						</view>
					</view>
					<view v-if="current === 1">
						<view class="content-text">
							<uni-collapse ref="collapse">
								<uni-collapse-item :open="true" v-for="(item, index) in courseDetailInfo.videoOutlineList" :title="`0${index + 1}.` + item.title">
									<view class="content" style="padding-left: 30px; height: 50px; line-height: 50px">
										<text class="text" v-for="(c, i) in item.videoOutineDetails" @click="handleOutLinePlay(c)">{{ `${index + 1}.${i + 1}` + c.name }}</text>
									</view>
								</uni-collapse-item>
							</uni-collapse>
						</view>
					</view>
					<view v-if="current === 2">
						<view class="content-text">
							<view class="commendVideoList" v-for="(item, index) in courseDetailInfo.commendVideoList" :key="index" @click="handleItem(item)">
								<img v-if="item.cover" :src="`https://www.aikoolearn.com/video-dev${item.cover}`" style="width: 126px; height: 84px" />
								<view class="">
									<p>{{ item.title }}</p>
									<p>讲师：{{ item.lecturer }}</p>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getVideoInfo, toggleCollect } from '@/services/course.js';

export default {
	data() {
		return {
			courseDetailInfo: {},
			items: ['课程介绍', '课程大纲', '推荐课程'],
			current: 0,
			isCollect: false
		};
	},
	onLoad(option) {
		this.getVideoInfo(option.rid);
	},
	methods: {
		back(){
			uni.navigateBack()
		},
		handleItem(item) {
			//   this.$router.replace({
			//     path: '/courseDetail',
			//     query: {
			//       rid: item.rid
			//     }
			//   })
			// },
		},
		// 开始学校
		handlePlay() {
			uni.navigateTo({
				url: '/pages/video/index?rid='+this.courseDetailInfo.rid
			})
			
		},
		onClickItem(e) {
			if (this.current !== e.currentIndex) {
				this.current = e.currentIndex;
			}
		},
		handleOutLinePlay(item) {
			// this.$router.push({
			// 	path: '/video',
			// 	query: {
			// 		rid: item.rid,
			// 		outLineId: item.rid,
			// 		vUrl: item.url
			// 	}
			// });
		},
		async handleCollect(type) {
			const user = uni.getStorageSync('userInfo');

			if (user) {
				if (type === 'on') {
					this.isCollect = true;
					const res = await toggleCollect({
						videoId: this.courseDetailInfo.rid
					});
					if (res.code === 200) {
						uni.showToast({
							title: '收藏成功',
							icon: 'success',
							duration: 500
						});
					}
				} else {
					this.isCollect = false;
					const res = await toggleCollect({
						videoId: this.courseDetailInfo.rid
					});
					if (res.code === 200) {
						uni.showToast({
							title: '取消收藏成功',
							icon: 'success',
							duration: 500
						});
					}
				}
			} else {
				uni.showToast({
					title: '请先登录',
					icon: 'success',
					duration: 500
				});
			}
		},
		async getVideoInfo(id) {
			const res = await getVideoInfo({ rid: id, userId: null });
			if (res.code == 200) {
				this.courseDetailInfo = res.data;
				this.videoOutlineList = res.data.videoOutlineList.map((item) => {
					return { ...item, name: item.title };
				});
				this.isCollect = this.courseDetailInfo?.isCollect;
				this.isLike = this.courseDetailInfo?.isLike;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.courseDetails {
	background-color: #f4f5f7;
	::v-deep {
		.uni-collapse-item__title-text {
			font-weight: 600;
		}
	}

	.courseDetails-content {
		margin-top: 10px;
		.more-content {
			margin-top: 10px;
			padding: 5px 20px;
			background-color: #fff;
		}
		.main {
			padding: 5px 20px;
			display: flex;
			align-items: center;
			background-color: #fff;
			.main-right {
				margin-left: 10px;
				.title {
					font-size: 20px;
					font-weight: 600;
				}
				> :nth-child(2) {
					margin-top: 10px;
				}
				> :nth-child(3) {
					margin-top: 10px;
				}
				.collection {
					margin-top: 10px;
					display: flex;
					p {
						display: inline-block;
						width: 80px;
						background-color: lightgrey;
						padding: 10px;
						display: flex;
						margin: 0 !important;
						align-items: center;
						justify-content: center;
						border-radius: 8px;
						span {
							display: inline-block;
							margin-left: 5px;
							color: #ffff;
						}
					}
					view {
						color: #fff;
						width: 100px;
						line-height: 30px;
						padding: 5px;
						margin-left: 20px;
						text-align: center;
						background-color: #0fb09b;
						border-radius: 8px;
					}
				}
			}
		}
	}
	.content-text {
		margin-top: 20px;
		padding: 20px;
		box-shadow: 0 12px 20px 0 rgba(95, 101, 105, 0.1);
		.synopsis {
			margin-top: 10px;
		}
		.commendVideoList {
			display: flex;
			align-items: center;
			margin-top: 15px;

			> :nth-child(2) {
				margin-left: 10px;
				> :nth-child(1) {
					font-size: 16px;
					font-weight: 600;
				}
				> :nth-child(2) {
					margin-top: 5px;
				}
			}
		}
	}
}

.header {
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	/* 自定义导航栏 */
	.status_title {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100.061rpx;
		padding: 0 16px;
		background-color: #ffffff;
	}
	.status_left {
		width: 24px !important;
	}
	.status_center {
		font-size: 17px;
		font-weight: 700;
	}
	.status_right {
		width: 22px;
	}
}
</style>
